<template>
    <div class="back_contain_n mine-account">
        <div class="leftList">
            <li v-for="(item,index) in paramList" :key="index"
                :class="{'active': viewType == item.key}"
                @click="changeView(item)"
            >
                <el-badge :value="item.num" class="item">
                    <span>{{item.name}}</span>
                </el-badge>
            </li>
        </div>
        <div class="mainTable">
            <table-one v-if="viewType == 'order_sure'" ref="order_sure"></table-one>
            <table-two v-else ref="order_sure"></table-two>
        </div>
    </div>
</template>

<script>
import tableOne from './table-one/index.vue'
import tableTwo from './table-two/index.vue'
export default {
    data() {
        return {
            viewType: 'order_sure',
            paramList: [
                { name: "规格确认",key:'order_sure',tableType:'1',num:0},
                { name: "进行中",key:'order_running',tableType:'2',num:0},
                { name: "发货完成",key:'order_complete',tableType:'3'},
                { name: "已取消",key:'order_display',tableType:'4'},
            ],
        };
    },
    methods: {
		changeView(val){
			let self = this;
			self.viewType = val.key;
			console.log(self.viewType)
			self.$nextTick(()=>{
				self.$refs.order_sure.init(val.tableType);
			})

		},
		getOrderNum() {
			let self = this;
			self.$http({
				url: "/jinl/order/getOrderNum",
				method: "post",
			}).then(resp => {
				if (resp.success) {
					self.paramList[0].num = resp.result.sure;
					self.paramList[1].num = resp.result.running;
				}
			});
		},
    },
	mounted(){
		let self = this;
		self.$eventBus.$on('getOrderNum',function () {
			self.getOrderNum();
		});
		self.getOrderNum();
		self.changeView({key:self.viewType});
	},
    components: {tableOne,tableTwo}
};
</script>

<style lang="scss" scoped>
.mine-account {
    .leftList {
        display: flex;
        margin-bottom: 15px;
        li {
            list-style: none;
            width: 100px;
            height: 30px;
            line-height: 28px;
            border-bottom: 1px solid #fff;
            color: #333;
            text-align: center;
            cursor: pointer;
            margin-bottom: 10px;
            transition: all .5s;
            position: relative;
            display: flex;
            justify-content: center;
            &.active {
                color: #ff9935;
                border-color: #ff9935;
                position: relative;
                font-weight: 600;
                font-size: 14px;
            }
        }
    }
}
</style>
